<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/userTemplate.xhtml">

    <ui:define name="title">
        Index
    </ui:define>

    <ui:define name="head">
        <link rel="stylesheet" href="../../res/css/juicyslider.css" />
        <link rel="stylesheet" href="../../res/css/cambridge.css" />
        <style>
            /* Prevents slides from flashing */
            #slides {
                display:none;
            }
        </style>
        <script type="text/css" src="../../res/js/jquery.slides.min" />
        <script>
            $(function(){
            $('.carousel').carousel({
            interval: 2000
            });
            });

        </script>
    </ui:define>
    <ui:define name="content1">
        <div class="carousel slide" id="carousel-300686">
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#carousel-300686">
                </li>
                <li data-slide-to="1" data-target="#carousel-300686">
                </li>
                <li data-slide-to="2" data-target="#carousel-300686">
                </li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/1" />
                    <div class="carousel-caption">
                        <h4>
                            First Thumbnail label
                        </h4>
                        <p>
                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/2" />
                    <div class="carousel-caption">
                        <h4>
                            Second Thumbnail label
                        </h4>
                        <p>
                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                    </div>
                </div>
                <div class="item">
                    <img alt="" src="http://lorempixel.com/1600/500/sports/3" />
                    <div class="carousel-caption">
                        <h4>
                            Third Thumbnail label
                        </h4>
                        <p>
                            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                        </p>
                    </div>
                </div>
                <!--                <div class="item">
                                    <div class="jumbotron">
                                        <h1>
                                            Hello, world!
                                        </h1>
                                        <p>
                                            This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                                        </p>
                                        <p>
                                            <a class="btn btn-primary btn-large" href="#">Learn more</a>
                                        </p>
                                    </div>
                                </div>-->
            </div> <a class="left carousel-control" href="#carousel-300686" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-300686" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <div class="row">
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-heading">Exam result</div>
                    <div class="panel-body">
                        <select title="Center">
                            <option>BTech</option>
                            <option>SRC</option>
                        </select>
                        <div class="list-group">
                            <a>aardvark babassu</a>
                            <a>aardvark babassu</a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-2 col-md-2 index_main_item btn btn-primary">
                    <h3>Events</h3>
                </div>
            </div>

            <div class="row">
                <div class="panel panel-default col-5 col-sm-5 col-lg-5">
                    <div class="panel-heading">Courses</div>
                    <div class="panel-body">
                        <div class="list-group">
                            <div>
                                <a>
                                    <img width="120" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgoebOGMWEygOeHbmXsN5czfGJdnRMnt5H1Z8RllcJRnva683THw" />aardvark babassu
                                </a>
                            </div>
                            <div>
                                <a>aardvark babassu</a>
                                <a><img width="120" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgoebOGMWEygOeHbmXsN5czfGJdnRMnt5H1Z8RllcJRnva683THw" />aardvark babassu</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-3 col-sm-3 col-lg-3">
                <p>Toppers</p>
            </div>

        </div>
        <div class="row text-center" >
            <div class="row person_image_slides ">
                <ul>
                    <li>
                        <div class="col-md-2 col-md-offset-1">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                    <li>
                        <div class="col-md-2">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                    <li>
                        <div class="col-md-2">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                    <li>
                        <div class="col-md-2">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                    <li>
                        <div class="col-md-2">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                    <li>
                        <div class="col-md-2">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                    <li>
                        <div class="col-md-2">
                            <img src="../../res/img/person_image/stu1.jpg" width="100"  />
                        </div>
                    </li>
                </ul>
            </div>

        </div>


    </ui:define>
</ui:composition>
